<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style/common.css" rel="stylesheet"/>
<style>
	#tabmenu
	{
		background-color: #eee;
		width: 425px;
	}
	#tabmenu div
	{
		display: inline-block;
		width: 100px;
		height: 20px;
		text-align:center;
		padding-top:10px;
		border-radius: 5px 5px 0px 0px;
		border-color: #00f;
		border-style: solid;
		font-size: 11px;
	}
	#tabmenu .buttonUp
	{
		background-color: #eef;
	}
	#tabmenu .buttonDown
	{
		background-color: #e33;
	}
	#tabmenu .buttonSelected
	{
		background-color: #f0f;
	}
</style>
    
<title>Sticker :: TabMenu</title>
	<script src="./js/importlibs.js"></script>
    <script type="text/javascript">
	window.onload = function()
	{
var _tabmenu = new STTabMenu( document.getElementById( "tabmenu" ), "buttonUp", "buttonDown", "buttonSelected" );
// 선택상태 설정
_tabmenu.setSelectedIndex( 1 );
// 이벤트 처리
_tabmenu.onChange = function( index )
{
	console.log( "클릭된 인덱스 : [파라미터방식]" + index );
	console.log( "클릭된 인덱스 : [함수방식]" + _tabmenu.getSelectedIndex() );
}
	}
	</script>
</head>
<body>
<h1>Lv2. STTabMenu</h1>
    <h4>Code Sample</h4>
<pre class="examplefield"><span style="color:#ff5600">var</span> _tabContainer <span style="color:#069;font-weight:700">=</span> <span style="color:#a535ae">document</span>.<span style="color:#45ae34;font-weight:700">getElementById</span>( <span style="color:#666">"tabmenu"</span> );
<span style="color:#ff5600">var</span> _tabmenu <span style="color:#069;font-weight:700">=</span> <span style="color:#069;font-weight:700">new</span> <span style="color:#21439c">STTabMenu</span>( _tabContainer , <span style="color:#666">"buttonUp"</span>, <span style="color:#666">"buttonDown"</span>, <span style="color:#666">"buttonSelected"</span> );
<span style="color:#af82d4">// 임의 선택</span>
_tabmenu.setSelectedIndex( <span style="color:#a8017e">1</span> );
<span style="color:#af82d4">// 이벤트 처리</span>
<span style="color:#a535ae">_tabmenu</span>.<span style="color:#21439c">onChange</span> <span style="color:#069;font-weight:700">=</span> <span style="color:#ff5600">function</span>( index )
{
    <span style="color:#21439c">console</span><span style="color:#45ae34;font-weight:700">.log</span>( <span style="color:#666">"클릭된 인덱스 : [파라미터방식]"</span> <span style="color:#069;font-weight:700">+</span> index );
    <span style="color:#21439c">console</span><span style="color:#45ae34;font-weight:700">.log</span>( <span style="color:#666">"클릭된 인덱스 : [함수방식]"</span> <span style="color:#069;font-weight:700">+</span> _tabmenu.getSelectedIndex() );
}enu.getSelectedIndex() );
}
</pre>
	<div id="tabmenu">
    	<div>button1</div><div>button2</div><div>button3</div><div>button4</div>
    </div>
    
    <div class="desc">
<p>
<div class="desc">
<span class="title">[Method]</span><br>
<span class="MethodSpan">function</span> getSelectedIndex() : 현재 선택된 인덱스<br>
<span class="MethodSpan">function</span> setSelectedIndex(index) : 버튼 임의로 선택<br>
<span class="MethodSpan">function</span> autoSize() : 1행으로 가로 정렬<br>
</p>
<p>
<span class="title">[Call Back Function]</span><br>
onChange( index ) : 버튼을 선택할때 발생
</p>
</div>
</body>
</html>
